<template>
    <div class="divBox">
        <el-card class="box-card">
            <el-form ref="elForm" :model="ruleForm" :rules="rules" label-width="150px">
                <el-row>

                    <el-col :span="6">
                    <el-form-item label="关联商家:">
                                <el-select v-model="ruleForm.shopId" clearable  placeholder="请选择商家" style="width: 250px;"
                                    >
                                    <el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                        
                            <el-form-item label="活动名称:" prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入活动名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="活动图片:" prop="banner">
                                <el-input v-model="ruleForm.banner" placeholder="请输入活动banner链接"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="活动时间:" prop="time">
                            <el-date-picker v-model="ruleForm.time" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" size="small" placement="bottom-end" placeholder="自定义时间" style="width: 250px;"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="奖励积分:" prop="point">
                            <el-input v-model="ruleForm.point" placeholder="请输入奖励积分"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="奖励优惠券:" prop="coupon">
                            <el-select v-model="ruleForm.coupon" clearable  placeholder="请选择优惠券">
                                <el-option v-for="item in couponList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="小程序跳转链接:" prop="address">
                            <el-input v-model="ruleForm.address" placeholder="请输入小程序跳转链接"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="商品详情:">
                    <Tinymce v-model="ruleForm.content"></Tinymce>
                </el-form-item>
                <el-button type="primary" size="mini" @click="submit">提交</el-button>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import {  addDengji, updateDengji } from '@/api/dengji'
import { shopListApi } from '@/api/shopPoint';
import Tinymce from '@/components/Tinymce/index'
export default {
    name: 'ActivitySet',
    components: {Tinymce },
    data() {
        return {
            ruleForm: {
                name: null,
                shopId: null,
                banner: null,
                status: 0,
                time: null,
                point: null,
                coupon: null,
                url: '',
                content: ''
            },
            rules: {
                shopId: [
                    { required: true, message: '请选择选择商家', trigger: 'change' }
                ],
            },
            shopList: [],
        }
    },
    async created() {
        this.getShopList()
    },
    methods: {
        getShopList() {
            shopListApi ({
                page: 1,
                limit: 100,
                status: 1,
                temp: new Date().getTime()
            }).then(res=>{
                this.shopList = res.list;
            })
        },
        submit() {
            this.$refs.elForm.validate(valid => {
                if (!valid) return
                console.log(this.ruleForm, 'this.ruleForm----')
                addDengji(this.ruleForm).then(res => {
                    console.log(res)
                })
            })
        },
    },

}
</script>

<style lang="scss" scoped>
.discountCoupon {
    display: flex;

}

.el-table__header-wrapper {
    background-color: #ccc !important;
}

.addDiscountCoupon {
    display: flex;
    font-size: 15px;
    color: rgb(88, 99, 222);
    padding-left: 120px;
    margin-top: 20px;

}

.newCoupon {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(#000, 0.3);
    padding-top: 80px;
    padding-bottom: 20px;
    z-index: 9999;

    .discountCouponList {
        margin-top: 20px;
        padding-top: 20px;
        background-color: #fff;
        width: 70%;
        height: 100%;
        margin: 0 auto;
        padding-bottom: 20px;
        margin-top: 50px;

        .selectDiscountCoupon {
            display: flex;
            padding-left: 20px;
            margin-bottom: 20px;

        }
    }
}
</style>